<template>
  <div id="app">


    <!-- 参数绑定 -->
    <!-- 对子组件传递msg参数 -->
    <!-- <Demo1 v-bind:msg="prent_msg" /> -->
    
     <!-- 生命周期 -->
    <!-- <Demo2 msg="Vue第三讲下半场" /> -->

    <!-- 使用路由组件托管我们整个应用的页面 -->
    <router-view />
  </div>
</template>

<script>
// 组件
// import Demo1 from "./components/Demo1.vue";
// import Demo2 from "./components/Demo2.vue";

export default {
  name: "app",
  components: {
    // Demo1,
    // Demo2
  },
  data() {
    return {
      // 用于传递
      prent_msg: "我是新属性",
    };
  },
  
};
</script>


<style lang="less">
/* 此处的css将应用到全局 */

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}


/*h1 {*/
/*color: aqua*/
/*}*/

/* 很多东西的简写 */

.fwl {
  font-weight: lighter;
}

.fwb {
  font-weight: bolder;
}

.fz8 {
  font-size: 8/16rem;
}

.fz9 {
  font-size: 9/16rem;
}

.fz10 {
  font-size: 10/16rem;
}

.fz11 {
  font-size: 11/16rem;
}

.fz12 {
  font-size: 12/16rem;
}

.fz13 {
  font-size: 13/16rem;
}

.fz14 {
  font-size: 14/16rem;
}

.fz15 {
  font-size: 15/16rem;
}

.fz16 {
  font-size: 16/16rem;
}

.fz17 {
  font-size: 17/16rem;
}

.fz18 {
  font-size: 18/16rem;
}

.fz19 {
  font-size: 19/16rem;
}

.fz20 {
  font-size: 20/16rem;
}

.fz21 {
  font-size: 21/16rem;
}

.fz22 {
  font-size: 22/16rem;
}

.fz23 {
  font-size: 23/16rem;
}

.fz24 {
  font-size: 24/16rem;
}

.fz25 {
  font-size: 25/16rem;
}

.fz26 {
  font-size: 26/16rem;
}

.fz27 {
  font-size: 27/16rem;
}

.fz28 {
  font-size: 28/16rem;
}

.fz29 {
  font-size: 29/16rem;
}

.fz30 {
  font-size: 30/16rem;
}

.fz32 {
  font-size: 32/16rem;
}

.fz44 {
  font-size: 44/16rem;
}

.fx {
  display: flex;
}

.fxc {
  display: flex;
  flex-direction: column;
}

.fxrc {
  display: flex;
  align-items: center;
}

.fxcc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fxjb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fxw {
  flex-wrap: wrap;
}

.fx1 {
  flex: 1;
}
</style>
